<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
    <head>
        <meta charset="UTF-8">
        <title>内置对象</title>
        <link rel='stylesheet' type='text/css' href='../css/c1.css'>
        <script language="JavaScript" src = '../js/time.js'></script>
        <script>
            //定义settimeout的方法
            function timedMsg()
        {
            var t=setTimeout("alert('5 seconds!')",100)
        }
        var my = function () {
            alert('你好啊！')
        };

            window.onload =function () {
                //时间对象脚本
                myTime();
                window.setInterval(myTime, 100);
                //
                //window对象脚本
                document.getElementById('btn1').onclick = function () {
                    var a = prompt();//弹出一个输入框
                    confirm('是否要保存？');//弹出一个对话框，确定或取消
                    alert(a);//弹出一个提示框，显示输入框内输入的内容
                    timedMsg();
                    window.setInterval(my, 100);
                 //window.close("http://www.baidu.com");
             };
                document.getElementById('open').onclick = function () {
                    window.open("../txt/index.html");
                };
                //document对象脚本
                document.getElementById('btn8').onclick = function () {
                    var _pa = document.createElement('div');
                    _pa.style.backgroundColor = 'red';
                    _pa.style.width = '200px';
                    _pa.style.height = '200px';

                    document.getElementById('p2').appendChild(_pa);
                    var txt  = document.createTextNode("hello");
                    _pa.appendChild(txt);
                    _pa.innerHTML = '<input  type  = "text"/>'

             };


                //location对象及方法
                document.getElementById('btn2').onclick = function () {
                    var loc = window.location;
                    alert(loc.href);//当前的地址
                    alert(loc.hostname);//主机名|域名
                    alert(loc.pathname);//地址路径
                    alert(loc.port);//端口
                    alert(loc.protocol);//协议*/
                };
                //screen对象及方法
                document.getElementById('btn3').onclick = function () {
                    alert(screen.availWidth);//有效的宽度
                    alert(screen.availHeight);//有效的高度
                    alert(screen.width);//实际的宽度
                    alert(screen.height);//实际的高度
                    alert(screen.colorDepth);//颜色深度
                };
                //math 对象及方法
                document.getElementById('btn4').onclick = function () {
                    alert(Math.min(5,7));//返回 x 和 y 中的最低值。
                    alert(Math.max(5,7));//返回 x 和 y 中的最高值。
                    alert(Math.random());//返回 0 ~ 1 之间的随机数。
                    alert(Math.abs(5));//返回数的绝对值。
                    alert(Math.floor(4.22));//对数进行下舍入。
                    alert(Math.ceil(4.22));//	对数进行上舍入
                };
                //string 对象及方法
                document.getElementById('btn5').onclick = function () {
                    //substr indexOf concat split charAt charCodeAt startsWith endsWith
                    var aa = 'asdfgbb';
                    alert(aa.substr(4,3));//截取长度  ( 起始位置，长度)
                    alert(aa.indexOf('d'));//查找位置（内容）
                    alert(aa.concat("hello"));// 追加
                    alert(aa.charAt("2"));//获取某个位置的字符内容
                    alert(aa.charCodeAt("2"));//返回在指定的位置的字符的 Unicode 编码。
                    alert(aa.startsWith("a"));//以什么开始
                    alert(aa.endsWith("d"));//以什么结束
                    alert(aa.replace(/asdfgbb/,"hello"));//替换
                    var str="How are you doing today?";
                    alert(str.split(" "));//	把字符串分割为字符串数组
                    alert(str.split(""));
                    alert(str.split(" ",3));
                };
                //length join push pop concat sort shift unshift reverse slice splice reverse
                //array对象及方法
                document.getElementById('btn6').onclick = function () {
                    var a = [1,2,3];
                    alert(a.length);//返回数组中元素的数目。
                    alert(a.concat(4,5));//连接两个或更多的数组，并返回结果。
                    var arr = new Array(3);
                    arr[0] = "1";
                    arr[1] = "2";
                    arr[2] = "3";
                    arr[3] = "4";
                    arr[4] = "5";
                    arr[5] = "6";
                    alert(arr.join());//把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔
                    alert(arr.pop());//删除并返回数组的最后一个元素
                    alert(arr.push("G"));//向数组的末尾添加一个或更多元素，并返回新的长度。
                    alert(arr);
                    alert(arr.reverse());//颠倒数组中元素的顺序。
                    alert(arr.shift());//删除并返回数组的第一个元素
                    arr.unshift('qq');//向数组的开头添加一个或更多元素，并返回新的长度
                    alert(arr);
                    alert(arr.slice(1));//从某个已有的数组返回选定的元素
                    alert(arr.sort());//对数组的元素进行排序
                    arr.splice(1,1,"W");//删除元素，并向数组添加新元素。
                    alert(arr);
                };
                //cookie
                document.getElementById('btn7').onclick = function () {
                    alert(document.cookie);
                };


            };
        </script>

    </head>
    <body>
    <div class="title">内置对象</div>
    <div class="title">window对象 </div>
    <div style="padding-left:20px;">
        <span>alert</span>（）； 弹出个提示框 (确定)<br/>
        <span>prompt</span>（）；弹出个输入框<br/>
        <span>confirm</span>（）；弹出个确认框 (确定,取消)<br/>
        <span>setInterval</span>  定时器<br />
        <span>setTimeout</span>  用于在指定的毫秒数后调用函数或计算表达式。
    </div>
    <div class="case">
            <div class="title" >代码示例</div>
            <div class="code">
                <pre>
                      var a = <span>prompt</span>();
                      <span>confirm</span>('是否要保存？');
                      <span>alert</span>(a);


                    //定义settimeout的方法
                        function timedMsg()
                    {
                        var t=<span>setTimeout</span>("alert('5 seconds!')",100)
                    }
                    timedMsg();//调用setTimeout的方法  setTimeout() 只执行一次
                    var my = function () {
                                alert('你好啊！')
                            };
                     window.<span>setInterval</span>(my, 100);
                    //setInterval 按照时间 间隔来循环执行
                    //参数1: 脚本内容
                    //参数2: 时间单位 (ms) 1000ms = 1s


                      document.getElementById('open').onclick = function () {
                        window.<span>open</span>("../txt/index.html");
                                    };
                        打开一个新的浏览器窗口或查找一个已命名的窗口。
                        IE老版本有效果
                        现代高级浏览器只在新开的页面（必须是脚本操作的）才有效果
                    window.<span>close</span>();//	关闭浏览器窗口。
                </pre>
            </div>
            <div class="title">代码效果</div>
            <div class="code">
                <button id="btn1">点击查看效果</button>
                <button id="open">点击查看open代码效果</button>
            </div>
    </div>
    <hr/>
    <div class="title">document对象 </div>
    <div style="padding-left:20px;">
    </div>
    <div class="case">
        <div class="title">代码示例</div>
        <div class="code">
                <pre>
                    页面输出
                         document.write();
                         document.writein();
                    获取页面元素
                        document.getElementById();             id
                        document.getElementsByClassName();     class
                        document.getElementsByTagName()        tag标签的意思
                        document.head
                        document.title 标题
                        document.body
                     填充内容
                        textcontent
                        innerText  至少老版本的firefox不支持
                        createTextNode   文本内容[对象] （var txt  = document.createTextNode("hello ");
                             pa.appendChild(txt)）
                             innerHTML(  pa.innerHTML = '&lt;input  type  = "text"/&gt;') 作为字符串填充
                    代码
                    var _pa = document.<span>createElement</span>('div');
                    _pa.style.backgroundColor = 'red';
                    _pa.style.width = '200px';
                    _pa.style.height = '200px';

                    document.<span>getElementById</span>('p2').appendChild(_pa);
                    var txt  = document.<span>createTextNode</span>("hello");
                    _pa.<span>appendChild</span>(txt);
                    _pa.<span>innerHTML</span> = '&lt;input  type  = "text"/&gt;'
                </pre>
        </div>
        <div class="title">代码效果</div>
        <div id="p2" class="code">
            <button id="btn8">点击查看效果</button>

        </div>
    </div>
    <hr/>
    <div class="title">Date对象 </div>
    <div class="case">
        <div class="title">代码示例</div>
        <div class="code">
                <pre>
                var myTime = function() {
                    var d = new <span>Date</span>();//表明生成了一个日期对象
                    var year = d.<span>getFullYear</span>();//表明生成了年
                    var month = d.<span>getMonth</span>();// 月份  从0开始
                    var date = d.<span>getDate</span>();//日
                    var week = d.<span>getDay</span>();//星期
                    var hour = d.<span>getHours</span>();//小时
                    var minute = d.<span>getMinutes</span>();//分钟
                    var second = d.<span>getSeconds</span>();//秒
                    var ms = d.<span>getMilliseconds</span>();//毫秒
                    var pv = document.getElementById('p1');
                    pv.textContent = '今天是 : 星期' + week + ' ' + year + '年' + (month + 1) + '月' + date + '日' + hour + ':' + minute + ':' + second;
                };
                </pre>
        </div>
        <div class="title">代码效果</div>
        <div class="code">
            <div id="p1" ></div>
        </div>
    </div>
    <hr/>
    <div class="title">history对象 </div>
    <div class="case">
        <div class="title">代码示例</div>
        <div class="code">
                <pre>
                function goForward()
                {
                    window.history.<span>forward</span>();//向后一页
                }
                function goBack()
                {
                    window.history.<span>back</span>();//向前一页
                }
                function go()
                {
                    window.history.<span>go</span>(0);//返回两页
                }
                </pre>
        </div>
        <div class="title">代码效果</div>
        <div class="code">
            <script>
                function goForward()
                {
                    window.history.forward();//向后一页
                }
                function goBack()
                {
                    window.history.back();//向前一页
                }
                function go()
                {
                    window.history.go(0);//返回两页
                }
            </script>
            <input type="button" value="向后一页" onclick="goForward()" />
            <input type="button" value="向前一页" onclick="goBack()" />
            <input type="button" value="返回两页" onclick="go()" />
        </div>
    </div>
    <hr/>
    <div class="title">location对象 </div>
    <div class="case">
        <div class="title">代码示例</div>
        <div class="code">
                <pre>
                 document.getElementById('btn2').onclick = function () {
                        var loc = window.<span>location</span>;
                        alert(loc.<span>href</span>);//当前的地址
                        alert(loc.<span>hostname</span>);//主机名|域名
                        alert(loc.<span>pathname</span>);//地址路径
                        alert(loc.<span>port</span>);//端口
                        alert(loc.<span>protocol</span>);//协议*/
                    };
                </pre>
        </div>
        <div class="title">代码效果</div>
        <div class="code">
            <button id="btn2">点击查看效果</button>
        </div>
    </div>
    <hr/>
    <div class="title">Screen对象 </div>
    <div class="case">
        <div class="title">代码示例</div>
        <div class="code">
                <pre>
                 document.getElementById('btn3').onclick = function () {
                        alert(screen.<span>availWidth</span>);//有效的宽度
                        alert(screen.<span>availHeight</span>);//有效的高度
                        alert(screen.<span>width</span>);//实际的宽度
                        alert(screen.<span>height</span>);//实际的高度
                        alert(screen.<span>colorDepth</span>);//颜色深度
                    };
                </pre>
        </div>
        <div class="title">代码效果</div>
        <div class="code">
            <button id="btn3">点击查看效果</button>
        </div>
    </div>
    <hr/>
    <div class="title">math对象 </div>
    <div class="case">
        <div class="title">代码示例</div>
        <div class="code">
                <pre>
                 document.getElementById('btn4').onclick = function () {
                        alert(Math.<span>min(5,7)</span>);//返回 x 和 y 中的最低值。
                        alert(Math.<span>max(5,7)</span>);//返回 x 和 y 中的最高值。
                        alert(Math.<span>random()</span>);//返回 0 ~ 1 之间的随机数。
                        alert(Math.<span>abs(5)</span>);//返回数的绝对值。
                        alert(Math.<span>floor(4.22)</span>);//对数进行下舍入。
                        alert(Math.<span>ceil(4.22)</span>);//	对数进行上舍入
                    };
                </pre>
        </div>
        <div class="title">代码效果</div>
        <div class="code">
            <button id="btn4">点击查看效果</button>
        </div>
    </div>
    <hr/>
    <div class="title">string对象 </div>
    <div class="case">
        <div class="title">代码示例</div>
        <div class="code">
                <pre>
                 var aa = 'asdfgbb';
                    alert(aa.<span>substr</span>(4,3));//截取长度  ( 起始位置，长度)
                    alert(aa.<span>indexOf</span>('d'));//查找位置（内容）
                    alert(aa.<span>concat</span>("hello"));// 追加
                    alert(aa.<span>charAt</span>("2"));//获取某个位置的字符内容
                    alert(aa.<span>charCodeAt</span>("2"));//返回在指定的位置的字符的 Unicode 编码。
                    alert(aa.<span>startsWith</span>("a"));//以什么开始
                    alert(aa.<span>endsWith</span>("d"));//以什么结束
                    alert(aa.<span>replace</span>(/asdfgbb/,"hello"));//替换
                    var str="How are you doing today?";
                    document.write(str.<span>split</span>(" ")+"&lt;br /&gt;");//把字符串分割为字符串数组
                    document.write(str.<span>split</span>("")+"&lt;br /&gt;");
                    document.write(str.<span>split</span>(" ",3));
                </pre>
        </div>
        <div class="title">代码效果</div>
        <div class="code">
            <button id="btn5">点击查看效果</button>
        </div>
    </div>
    <hr/>
    <div class="title">array对象 </div>
    <div class="case">
        <div class="title">代码示例</div>
        <div class="code">
                <pre>
                  var a = [1,2,3];
                    alert(a.<span>length</span>);//返回数组中元素的数目。
                    alert(a.<span>concat</span>(4,5));//连接两个或更多的数组，并返回结果。
                    var arr = new Array(3);
                    arr[0] = "1";
                    arr[1] = "2";
                    arr[2] = "3";
                    arr[3] = "4";
                    arr[4] = "5";
                    arr[5] = "6";
                    alert(arr.<span>join()</span>);//把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔
                    alert(arr.<span>pop()</span>);//删除并返回数组的最后一个元素
                    alert(arr.<span>push("G")</span>);//向数组的末尾添加一个或更多元素，并返回新的长度。
                    alert(arr);
                    alert(arr.<span>reverse()</span>);//颠倒数组中元素的顺序。
                    alert(arr.<span>shift()</span>);//删除并返回数组的第一个元素
                    arr.<span>unshift('qq')</span>;//向数组的开头添加一个或更多元素，并返回新的长度
                    alert(arr);
                    alert(arr.<span>slice(1)</span>);//从某个已有的数组返回选定的元素
                    alert(arr.<span>sort()</span>);//对数组的元素进行排序
                    arr.<span>splice(1,1,"W")</span>;//删除元素，并向数组添加新元素。
                    alert(arr);
                </pre>
        </div>
        <div class="title">代码效果</div>
        <div class="code">
            <button id="btn6">点击查看效果</button>
        </div>
    </div>
    <hr/>
    <div class="title">cookie对象 </div>
    <div class="case">
        <div class="title">代码示例</div>
        <div class="code">
                <pre>
                     alert(document.cookie);
                </pre>
        </div>
        <div class="title">代码效果</div>
        <div class="code">
            <button id="btn7">点击查看效果</button>
        </div>
    </div>
    <hr/>
    </body>
</html>